<template>
  <view class="seeker-home">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <i class="iconfont icon-search"></i>
        <input type="text" placeholder="搜索无人机相关职位..." />
      </view>
      <button class="filter-btn" @click="showFilter">
        <i class="iconfont icon-filter"></i>
      </button>
    </view>
    
    <!-- 职位分类标签 -->
    <view class="category-tabs">
      <scroll-view scroll-x="true" class="tabs-scroll">
        <view class="tab-item active">全部职位</view>
        <view class="tab-item">无人机飞手</view>
        <view class="tab-item">航拍师</view>
        <view class="tab-item">无人机维修</view>
        <view class="tab-item">算法工程师</view>
        <view class="tab-item">产品经理</view>
      </scroll-view>
    </view>
    
    <!-- 推荐职位列表 -->
    <view class="job-list">
      <view class="list-header">
        <text class="title">为你推荐</text>
        <text class="refresh" @click="refreshJobs">
          <i class="iconfont icon-refresh"></i> 换一批
        </text>
      </view>
      
      <view class="job-card" v-for="(job, index) in recommendJobs" :key="index" @click="viewJobDetail(job.id)">
        <view class="job-header">
          <image :src="job.companyLogo" class="company-logo" alt="公司logo"></image>
          <view class="job-info">
            <text class="job-title">{{ job.title }}</text>
            <text class="company-name">{{ job.companyName }}</text>
          </view>
          <button class="collect-btn" @click.stop="toggleCollect(job.id)">
            <i class="iconfont" :class="job.collected ? 'icon-collected' : 'icon-collect'"></i>
          </button>
        </view>
        
        <view class="job-details">
          <text class="salary">{{ job.salary }}</text>
          <text class="experience">{{ job.experience }}</text>
          <text class="education">{{ job.education }}</text>
        </view>
        
        <view class="job-tags">
          <view class="tag" v-for="(tag, i) in job.tags" :key="i">{{ tag }}</view>
        </view>
        
        <view class="job-footer">
          <text class="location">{{ job.location }}</text>
          <text class="update-time">{{ job.updateTime }}</text>
        </view>
      </view>
    </view>
    
    <helang-tabBar></helang-tabBar>
  </view>
</template>

<script>
import helangTabBar from '@/components/helang-tabBar/helang-tabBar.vue'
export default {
  components:{
	  helangTabBar
  },
  data() {
    return {
      recommendJobs: []
    };
  },
  onLoad() {
    // 检查用户是否已选择角色
    this.checkUserRole();
    // 获取推荐职位
    this.fetchRecommendJobs();
  },
  methods: {
    // 检查用户角色是否正确
    checkUserRole() {
      const role = uni.getStorageSync('selectedRole');
      if (role !== 'seeker') {
        uni.redirectTo({
          url: '/pages/roleSelect/roleSelect'
        });
      }
    },
    
    // 获取推荐职位
    fetchRecommendJobs() {
      // 模拟API请求
      setTimeout(() => {
        this.recommendJobs = [
          {
            id: 1,
            title: '专业无人机飞手',
            companyName: '蓝天航拍科技',
            companyLogo: '/static/images/company1.png',
            salary: '8K-15K',
            experience: '1-3年',
            education: '大专',
            tags: ['全职', '五险一金', '包食宿'],
            location: '深圳市南山区',
            updateTime: '今天更新',
            collected: false
          },
          {
            id: 2,
            title: '无人机算法工程师',
            companyName: '智能飞行科技',
            companyLogo: '/static/images/company2.png',
            salary: '15K-25K',
            experience: '3-5年',
            education: '本科',
            tags: ['全职', '年终奖', '弹性工作'],
            location: '北京市海淀区',
            updateTime: '昨天更新',
            collected: true
          },
          {
            id: 3,
            title: '无人机维修技术员',
            companyName: '飞翔设备服务',
            companyLogo: '/static/images/company3.png',
            salary: '6K-10K',
            experience: '不限',
            education: '中专',
            tags: ['全职', '包吃住', '技能培训'],
            location: '广州市天河区',
            updateTime: '3天前更新',
            collected: false
          }
        ];
      }, 800);
    },
    
    // 刷新职位列表
    refreshJobs() {
      uni.showLoading({ title: '刷新中...' });
      setTimeout(() => {
        this.fetchRecommendJobs();
        uni.hideLoading();
      }, 800);
    },
    
    // 查看职位详情
    viewJobDetail(jobId) {
      uni.navigateTo({
        url: `/pages/seeker/jobDetail?id=${jobId}`
      });
    },
    
    // 收藏/取消收藏职位
    toggleCollect(jobId) {
      const job = this.recommendJobs.find(item => item.id === jobId);
      if (job) {
        job.collected = !job.collected;
        // 保存收藏状态到本地
        const collectedJobs = uni.getStorageSync('collectedJobs') || [];
        if (job.collected) {
          collectedJobs.push(jobId);
          uni.showToast({ title: '收藏成功', icon: 'success' });
        } else {
          const index = collectedJobs.indexOf(jobId);
          if (index > -1) {
            collectedJobs.splice(index, 1);
          }
          uni.showToast({ title: '取消收藏', icon: 'none' });
        }
        uni.setStorageSync('collectedJobs', collectedJobs);
      }
    },
    
    // 显示筛选条件
    showFilter() {
      uni.navigateTo({
        url: '/pages/seeker/filter'
      });
    }
  }
};
</script>

<style scoped>
.seeker-home {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 100rpx;
}

.search-bar {
  display: flex;
  padding: 20rpx;
  background-color: #fff;
}

.search-input {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 60rpx;
  padding: 0 30rpx;
  height: 70rpx;
}

.search-input .iconfont {
  font-size: 30rpx;
  color: #94a3b8;
  margin-right: 15rpx;
}

.search-input input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  height: 100%;
}

.filter-btn {
  width: 70rpx;
  height: 70rpx;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15rpx;
}

.filter-btn .iconfont {
  font-size: 36rpx;
  color: #3b82f6;
}

.category-tabs {
  background-color: #fff;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #f1f5f9;
}

.tabs-scroll {
  white-space: nowrap;
  padding: 0 20rpx;
}

.tab-item {
  display: inline-block;
  padding: 12rpx 30rpx;
  margin-right: 10rpx;
  font-size: 28rpx;
  border-radius: 30rpx;
  color: #64748b;
}

.tab-item.active {
  background-color: #e0f2fe;
  color: #0284c7;
  font-weight: bold;
}

.job-list {
  padding: 20rpx;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1e293b;
}

.refresh {
  font-size: 26rpx;
  color: #3b82f6;
  display: flex;
  align-items: center;
}

.refresh .iconfont {
  margin-right: 5rpx;
  font-size: 24rpx;
}

.job-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.job-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.company-logo {
  width: 80rpx;
  height: 80rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.job-info {
  flex: 1;
}

.job-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1e293b;
  margin-bottom: 8rpx;
  display: block;
}

.company-name {
  font-size: 26rpx;
  color: #64748b;
}

.collect-btn {
  width: 50rpx;
  height: 50rpx;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.collect-btn .iconfont {
  font-size: 32rpx;
}

.icon-collect {
  color: #94a3b8;
}

.icon-collected {
  color: #f97316;
}

.job-details {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.salary {
  font-size: 30rpx;
  color: #dc2626;
  font-weight: bold;
}

.experience, .education {
  font-size: 26rpx;
  color: #64748b;
}

.job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  margin-bottom: 20rpx;
}

.tag {
  font-size: 24rpx;
  padding: 5rpx 15rpx;
  background-color: #f1f5f9;
  color: #64748b;
  border-radius: 4rpx;
}

.job-footer {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #94a3b8;
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  border-top: 1rpx solid #f1f5f9;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  color: #94a3b8;
}

.tab-item .iconfont {
  font-size: 40rpx;
  margin-bottom: 5rpx;
}

.tab-item.active {
  color: #3b82f6;
}
</style>
